<template>
  <div>
      <!-- 发布房源 -->
            <van-nav-bar
            title="发布房源"
            left-arrow
            @click-left="onClickLeft"
          />
      <!--房源信息 -->
      <div class="header">房源信息</div>
      <!-- 房源搜索 -->
        <div class="line">
          <div class="list-content">小区名称</div>
          <div class="list-extra">请输入小区名称 <van-icon name="arrow" /></div>
        </div>
      <!-- 租金 -->
         <div class="am-list-line">
          <div class="am-input">租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</div>
          <div class="am-control"><input placeholder="请输入租金/月" type="text" value=""></div>
          <div class="am-extra">￥/月</div>
         </div>
      <!-- 面积 -->
         <div class="am-list-line">
            <div class="am-input">建筑面积</div>
            <div class="am-control"><input placeholder="请输入建筑面积" type="text" value=""></div>
            <div class="am-extra">㎡</div>
         </div>
      <!-- 房间 -->
         <div class="am-list-line">
           <div class="am-list-content">户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</div>
           <div class="am-list-extra">
            <van-cell is-link @click="showPopup('房间')" :value='columns1'></van-cell>
            <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" v-if='isAll' >
              <van-picker
                      show-toolbar
                      :columns="columnsA"
                      @confirm="onConfirm"
                      @cancel="onCancel"
                    />
            </van-popup>
           </div>
        </div>
      <!-- 楼层 -->
      <div class="am-list-line">
           <div class="am-list-content">所在楼层</div>
           <div class="am-list-extra">
            <van-cell is-link @click="showPopup('楼层')" :value='floorq1'></van-cell>
            <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" v-if='isAll' >
              <van-picker
                      show-toolbar
                      :columns="columnsA"
                      @confirm="onConfirm"
                      @cancel="onCancel"
                    />
            </van-popup>
           </div>
        </div>
      <!-- 朝向 -->
      <div class="am-list-line">
           <div class="am-list-content">朝向</div>
           <div class="am-list-extra">
            <van-cell is-link @click="showPopup('朝向')" :value='direction1'></van-cell>
            <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" v-if='isAll' >
              <van-picker
                      show-toolbar
                      :columns="columnsA"
                      @confirm="onConfirm"
                      @cancel="onCancel"
                    />
            </van-popup>
           </div>
        </div>
      <!-- 房屋标题 -->
      <div class="Fang">
            <p class="Pfang">房屋标题</p>
            <div class="inpur"><input type="text" placeholder="请输入标题 (例如: 整租 小区名 2室 5000元)"></div>
      </div>
     <!-- 房屋图片 -->
      <div class="ImhC">
             <p class="Ifang">房屋图像</p>
             <div class="van" >
            <van-uploader v-model="fileList" multiple />
             </div>

      </div>
     <!-- 房屋配置 -->
     <div class="Fwu">
       <span v-for="(item,index) in text"
       :key="index"
       @click='guration($event.target)'>{{item}}</span>
     </div>
  </div>
</template>

<script>
export default {
  name: 'ZufangResources',

  data () {
    return {
      show: false,
      columns: ['一室', '二室', '三室', '四室', '四室+'],
      floor: ['高楼层', '中楼层', '低楼层'],
      direction: ['东', '南', '西', '北', '东南', '西南', '西北', '东北'],
      direction1: '请选择',
      floorq1: '请选择',
      columns1: '请选择',
      isAll: false,
      name: '',
      fileList: [],
      text: ['衣柜', '洗衣机', '空调', '天然气', '冰箱', '暖气', '电视', '热水器', '宽带', '沙发']
    }
  },
  computed: {
    columnsA () {
      if (this.name === '房间') {
        return this.columns
      } else if (this.name === '楼层') {
        return this.floor
      } else {
        return this.direction
      }
    }

  },

  mounted () {

  },

  methods: {
    // 跳回点击页面
    onClickLeft () {
      this.$router.go(-1)
    },
    showPopup (val) {
      this.show = true
      this.isAll = !this.isAll
      this.name = val
      console.log(this.name)
    },
    // 房间
    onConfirm (values) {
      this.isAll = !this.isAll
      if (this.name === '房间') {
        this.columns1 = values
      } else if (this.name === '楼层') {
        this.floorq1 = values
      } else {
        this.direction1 = values
      }
    },
    onCancel () {
      this.$toast('取消')
      this.isAll = !this.isAll
    },
    guration (e) {
      console.log(e.innerHTML)
    }
  }
}
</script>

<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
}
 .header{
   height: 40px;
   width: 100%;
   color: #21b97a;
   font-size: 14px;
   line-height: 40px;
   padding: 0 10px;
   border-bottom:solid 1px #d8d2d2;
 }
 .line{
    height: 40px;
    line-height: 40px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
      border-bottom:solid 1px #d8d2d2;
    .list-content{
       font-size: 14px;
    }
    .list-extra{
       font-size: 12px;
       color: #999;
    }
 }
 .am-list-line{
   height: 40px;
   width: 100%;
   font-size: 14px;
   line-height: 40px;
   display: flex;
   padding: 0 10px;
   justify-content: space-between;
   border-bottom:solid 1px #d8d2d2;
   .am-extra{
     width: 15%;
     padding-right:0px ;
   }
   .am-control{
     height: 38px;
     width:60%;
     input{
       height: 100%;
       border: solid 1px transparent;
     }
   }
 }
 .am-list-extra{
   .van-cell{
      padding: 6px ;
   }
 }
 .Fang{
    width: 100%;
    height: 90px;
    .Pfang{
       height: 40px;
       line-height: 40px;
       font-size:14px;
      padding-left:10px ;
      border-bottom:solid 1px #d8d2d2;
    }
    .inpur{
       height: 50px;
       width: 100%;
       line-height: 50px;
       input{
        border: solid 1px #fff;
        width: 100%;
        height: 100%;
         padding-left:10px ;
       }
    }
 }
 .ImhC{
   width: 100%;
   min-height: 160px;
   .Ifang{
     height: 40px;
       line-height: 40px;
       font-size:14px;
      padding-left:10px ;
       border-bottom:solid 1px #d8d2d2;
   }
    .van{
        width: 100%;
         min-height: 120px;
         padding:10px 0 0 15px ;
      }
 }
 .Fwu{
    width: 100%;
    height: 140px;
    padding: 10px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    span{
       width: 18%;
       height: 49px;
       line-height: 49px;
       background-color: #fff;
    }
    .color{
       background-color: #21b97a;
    }
 }
</style>
